4. 检查项分页
本项目所有分页功能都是基于ajax的异步请求来完成的，请求参数和后台响应数据格式都使用json数据格式。

1.请求参数包括页码、每页显示记录数、查询条件。

请求参数的json格式为：{currentPage:1,pageSize:10,queryString:''itcast''}
后台响应数据包括总记录数、当前页需要展示的数据集合。
响应数据的json格式为：{total:1000,rows:[]}
------------------------------------------------------------
checkitem.html
前端
pagination: {//分页相关模型数据
  currentPage: 1,//当前页码
  pageSize:10,//每页显示的记录数
  total:0,//总记录数
  queryString:null//查询条件
},
dataList: [],//当前页要展示的分页列表数据

#### 4.1.2 定义分页方法
在页面中提供了findPage方法用于分页查询，为了能够在checkitem.html页面加载后直接可以展示分页数据，
可以在VUE提供的钩子函数created中调用findPage方法
------------------------------------------------------------
//钩子函数，VUE对象初始化完成后自动执行
created() {
  this.findPage();
}
------------------------------------------------------------
//分页查询
findPage() {
  //分页参数
  var param = {
    currentPage:this.pagination.currentPage,//页码
    pageSize:this.pagination.pageSize,//每页显示的记录数
    queryString:this.pagination.queryString//查询条件
  };
  //请求后台
  axios.post("/checkitem/findPage.do",param).then((response)=> {
    //为模型数据赋值，基于VUE的双向绑定展示到页面
    this.dataList = response.data.rows;
    this.pagination.total = response.data.total;
  });
}
------------------------------------------------------------
#### 4.1.3 完善分页方法执行时机
除了在created钩子函数中调用findPage方法查询分页数据之外，
当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。
为查询按钮绑定单击事件，调用findPage方法

<el-button @click="findPage()" class="dalfBut">查询</el-button>

为分页条组件绑定current-change事件，此事件是分页条组件自己定义的事件，当页码改变时触发，
对应的处理函数为handleCurrentChange

<el-pagination
               class="pagiantion"
               @current-change="handleCurrentChange"
               :current-page="pagination.currentPage"
               :page-size="pagination.pageSize"
               layout="total, prev, pager, next, jumper"
               :total="pagination.total">
</el-pagination>
------------------------------------------------------------
定义handleCurrentChange方法
//切换页码
handleCurrentChange(currentPage) {
  //currentPage为切换后的页码
  this.pagination.currentPage = currentPage;
  this.findPage();
}

------------------------------------------------------------
后端代码：
#### 4.2.1 Controller层
在CheckItemController中增加分页查询方法
 //8/18/增加检测项分页查询方法
    @RequestMapping("/findPage")
    //src/main/java/com/itheima/entity/QueryPageBean.java
    public PageResult findPage(@RequestBody QueryPageBean queryPageBean) {
        PageResult pageResult = checkItemService.pageQuery(
                queryPageBean.getCurrentPage(),
                queryPageBean.getPageSize(),
                queryPageBean.getQueryString());
        /**@RestController 通过MVC把pageResult
        //是直接让方法转化java对象转换jsion*/
        return pageResult;
    }
------------------------------------------------------------
Service层使用

#### 4.2.2 服务接口
在CheckItemService服务接口中扩展分页查询方法
  //扩展分页查询方法
    public PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString);

#### 4.2.3 服务实现类
在CheckItemServiceImpl服务实现类中实现分页查询方法，基于Mybatis分页助手插件实现分页

//检查项分页查询
    @Override
    public PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString) {
        //完成分页查询基于mybatis框架提供的分页助手插件
        //一般分页查询  select * from_checkitem limit 0,10
        //queryString输入的查询页数
        PageHelper.startPage(currentPage, pageSize);

        Page<CheckItem> page =
                checkItemDao.selectByCondition(queryString);
        //currentPage页码pageSize查询页数
        //tola总的记录数/rowsf赋值页数和页码

        long tolal = page.getTotal();
        List<CheckItem> rows = page.getResult();
        //返回进行封装
        return new PageResult(page.getTotal(), page.getResult());
    }
------------------------------------------------------------
   Dao持久层使用mapper

    #### 4.2.4 Dao接口
    在CheckItemDao接口中扩展分页查询方法
      //使用的是Mybatis分页查询的插件
        //  <select id="selectByCondition" parameterType="string "
        //            resultType="com.itheima.pojo.CheckItem">
        //1.  中的返回指定的CheckItem中的数值
        //2.方法名字和sql语句中的id保持一致

        public Page<CheckItem> selectByCondition(String queryString);
        //3.定义返回值中的数据类型为String类型


#### 4.2.5 Mapper映射文件
在CheckItemDao.xml文件中增加SQL定义

<!--    添加查询检查项分页-->
    <select id="selectByCondition" parameterType="string "
            resultType="com.itheima.pojo.CheckItem">
        select * from t_checkitem
        -- 进行判断是否传参数过滤条件
        <if test="value !=null and value.length>0">
            where code=#{value }or name=#{value}
        </if>
------------------------------------------------------------